<template>
  <Modal :draggable="!$config.mask" :mask="$config.mask" :mask-closable="!$config.mask"
         :value="value"
         @on-ok="save"
         @on-visible-change="visibleChange"
         :width="1000">
    <p slot="header">
      选择流程模板
    </p>
    <flow-scheme-select ref="schemeSelect" v-model="selectedSchemes" @on-dblclick="dblClick"></flow-scheme-select>
    <div slot="footer">
      <Button icon="md-close" @click="cancel">取消</Button>
      <Button icon="md-checkmark" type="primary" @click="save" :disabled="selectedSchemes.length===0">确定</Button>
    </div>
  </Modal>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import FlowSchemeSelect from '@/components/select/flow-scheme-select.vue';

@Component({
  components: {FlowSchemeSelect},
})
export default class FlowSchemeSelectModal extends AbpBase {
  name: string = 'FlowSchemeSelectModal';
  @Prop({type: Boolean, default: false}) value: boolean;
  @Prop({
    type: Object, default: () => {
    },
  }) modalData: any;

  selectedSchemes: any[] = [];


  visibleChange(value: boolean) {
    if (!value) {
      this.reset();
      this.$emit('input', value);
    } else {
      (this.$refs.schemeSelect as any).selectedSchemes = this.modalData.selectedSchemes;
    }
  }

  save() {
    this.$emit('on-submit', this.selectedSchemes);
    this.$emit('input', false);
  }

  cancel() {
    this.$emit('input', false);
  }

  dblClick(){
      this.save();
  }


  reset() {
    (this.$refs.schemeSelect as any).selectedSchemes = [];
    (this.$refs.schemeSelect as any).init();
    ((this.$refs.schemeSelect as any).$refs.tableSelect as any).filter = '';
    ((this.$refs.schemeSelect as any).$refs.tableSelect as any).sorting = '';
    ((this.$refs.schemeSelect as any).$refs.tableSelect as any).currentPage = 1;
  }



}
</script>

<style lang="less" scoped>

</style>
